<!DOCTYPE html>
<html>
<head>
    <title>欢迎页</title>
    #parse("sys/header.html")
</head>
<body>
<div class="wrapper-content animated fadeIn" id="rrapp">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>{{orderSum}}</h3>
                    <p>所有订单</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-bag"></i>
                </div>
                <a onclick="vm.toOrderByShipStatus()" class="small-box-footer">详情 <i
                        class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>{{dfOrderSum}}</h3>
                    <p>待发货</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-bag"></i>
                </div>
                <a onclick="vm.toOrderByShipStatus(0)" class="small-box-footer">详情 <i
                        class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>{{yfOrderSum}}</h3>
                    <p>已发货</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-bag"></i>
                </div>
                <a onclick="vm.toOrderByShipStatus(1)" class="small-box-footer">详情 <i
                        class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-light-blue">
                <div class="inner">
                    <h3>{{yfkOrderSum}}</h3>
                    <p>待付款</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-bag"></i>
                </div>
                <a onclick="vm.toOrderByPayStatus(0)" class="small-box-footer">详情 <i
                        class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-fuchsia">
                <div class="inner">
                    <h3>{{thcOrderSum}}</h3>
                    <p>退货</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-bag"></i>
                </div>
                <a onclick="vm.toOrderByShipStatus(4)" class="small-box-footer">详情 <i
                        class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>{{ywcOrderSum}}</h3>
                    <p>已完成</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-bag"></i>
                </div>
                <a onclick="vm.toOrderByOrderStatus(402)" class="small-box-footer">详情 <i
                        class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>{{userSum}}</h3>
                    <p>所有会员</p>
                </div>
                <div class="icon">
                    <i class="fa fa-user-md"></i>
                </div>
                <a onclick="vm.toUser()" class="small-box-footer">详情 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>{{goodsSum}}</h3>
                    <p>所有商品</p>
                </div>
                <div class="icon">
                    <i class="fa fa-ship"></i>
                </div>
                <a onclick="vm.toGoods()" class="small-box-footer">详情 <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
    <table class="table table-hover table-responsive table-bordered">
        <tr>
            <th colspan="5">会员购买率：<span style="color: red;">{{hygml}}%</span>（会员购买率=已付款订单会员数÷会员总数）</th>
        </tr>
        <tr style='text-align: center;'>
            <th>会员总数</th>
            <th>已付款订单会员数</th>
            <th>有订单会员数</th>
            <th>今日订单数</th>
            <th>今日会员购物总额</th>
        </tr>
        <tr style='text-align: center;'>
            <td>{{userSum}}</td>
            <td>{{yfkOrderUserSum}}</td>
            <td>{{oderUserSum}}</td>
            <td>{{todayUserOrder}}</td>
            <td>{{todayUserSales}}</td>
        </tr>
    </table>

    <table class="table table-hover table-responsive table-bordered">
        <tr>
            <th colspan="3">每会员平均订单数及购物额（每会员平均订单数=有订单会员数÷会员总数）</th>
        </tr>
        <tr style='text-align: center;'>
            <th>总收入</th>
            <th>每会员订单数</th>
            <th>每会员购物数</th>
        </tr>
        <tr style='text-align: center;'>
            <td>{{incomeSum}}</td>
            <td>{{mhydds}}</td>
            <td>{{mhygws}}</td>
        </tr>
    </table>
    <table class="table table-hover table-responsive table-bordered">
        <tr>
            <th>总点击数：{{hitCount}}； 每千点击订单数：{{average1000}}； 每千点击购物额：{{averageSales1000}}</th>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#rrapp',
        data: {
            orderSum: 0,
            dfOrderSum: 0,//待发货
            yfOrderSum: 0,//已发货
            yfkOrderSum: 0,//待付款
            ywcOrderSum: 0,//已完成
            thcOrderSum: 0,//退货
            userSum: 0,//所有会员数
            goodsSum: 0,//所有商品数
            yfkOrderUserSum: 0,//已付款订单会员数
            oderUserSum: 0,//有订单会员数
            todayUserOrder: 0,//今日订单数
            todayUserSales: 0,//今日会员购物总额
            hygml: 0,//会员购买率
            incomeSum: 0,//总收入
            payedOrderCount: 0,//已支付订单数
            mhydds: 0,//每会员订单数
            mhygws: 0,//每会员购物数
            hitCount: 0,//总点击数
            average1000: 0,//每千点击订单数
            averageSales1000: 0//每千点击购物额
        },
        methods: {
            toOrderByShipStatus: function (shippingStatus) {
                if (!shippingStatus && shippingStatus != 0) {
                    openWindow({
                        top: true,
                        type: 2,
                        title: '订单',
                        content: '../shop/order.html'
                    });
                    return;
                }
                let url = '../shop/order.html?shippingStatus=' + shippingStatus;

                if (shippingStatus == 0) {//待发货
                    url += '&orderStatus=201&payStatus=2';
                    if (vm.dfOrderSum == 0) {
                        iview.Message.error('没有数据！');
                        return;
                    }
                } else if (shippingStatus == 1) {//已发货
                    if (vm.yfOrderSum == 0) {
                        iview.Message.error('没有数据！');
                        return;
                    }
                } else if (shippingStatus == 4) {//退货
                    if (vm.thcOrderSum == 0) {
                        iview.Message.error('没有数据！');
                        return;
                    }
                }

                openWindow({
                    top: true,
                    type: 2,
                    title: '订单',
                    content: url
                });
            },
            toOrderByPayStatus: function (payStatus) {
                if (vm.yfkOrderSum == 0) {
                    iview.Message.error('没有数据！');
                    return;
                }
                openWindow({
                    top: true,
                    type: 2,
                    title: '订单',
                    content: '../shop/order.html?orderStatus=' + payStatus
                });
            },
            toOrderByOrderStatus: function (orderStatus) {
                if (vm.ywcOrderSum == 0) {
                    iview.Message.error('没有数据！');
                    return;
                }
                openWindow({
                    top: true,
                    type: 2,
                    title: '订单',
                    content: '../shop/order.html?orderStatus=' + orderStatus
                });
            },
            toUser: function () {
                openWindow({
                    top: true,
                    type: 2,
                    title: '会员列表',
                    area: ['90%', '95%'],
                    content: '../shop/shopuser.html'
                });
            },
            toGoods: function () {
                openWindow({
                    top: true,
                    type: 2,
                    title: '商品',
                    content: '../shop/goods.html'
                });
            }
        },
        created: function () {
            let vue = this;
            $.getJSON("../order/queryTotal", function (r) {
                vue.orderSum = r.sum;
            });
            $.getJSON("../order/queryTotal?orderStatus=201&payStatus=2", function (r) {
                vue.dfOrderSum = r.sum;
                if (r.sum > 0) {
                    iview.Notice.info({
                        title: '您有待发货订单',
                        desc: '<a onclick="vm.toOrderByShipStatus(0)" class="small-box-footer">查看</a>',
                        duration: 0
                    });
                    let iN = new iNotify({
                        effect: 'flash',
                        interval: 500,
                        message: "待发订单",
                        audio: {
                            file: ['../statics/audio/dforder.mp3']
                        },
                        notification: {
                            title: "通知！",
                            body: '您有待发订单'
                        }
                    });
                    iN.setTitle(true).player();
                }
            });
            $.getJSON("../order/queryTotal?shippingStatus=1", function (r) {
                vue.yfOrderSum = r.sum;
            });
            $.getJSON("../order/queryTotal?orderStatus=0", function (r) {
                vue.yfkOrderSum = r.sum;
            });
            $.getJSON("../order/queryTotal?orderStatus=402", function (r) {
                vue.ywcOrderSum = r.sum;
            });
            $.getJSON("../order/queryTotal?shippingStatus=4", function (r) {
                vue.thcOrderSum = r.sum;
            });
            $.getJSON("../order/getUserOrderInfo?type=yfkOrderUserSum", function (r) {
                vue.yfkOrderUserSum = r.result;
            });
            $.getJSON("../order/getUserOrderInfo?type=oderUserSum", function (r) {
                vue.oderUserSum = r.result;
            });
            $.getJSON("../order/getUserOrderInfo?type=todayUserOrder", function (r) {
                vue.todayUserOrder = r.result;
            });
            $.getJSON("../order/getUserOrderInfo?type=todayUserSales", function (r) {
                vue.todayUserSales = r.result;
            });
            $.getJSON("../order/getUserOrderInfo?type=incomeSum", function (r) {
                vue.incomeSum = r.result;
            });
            $.getJSON("../order/getUserOrderInfo?type=payedOrderCount", function (r) {
                vue.payedOrderCount = r.result;
            });
            $.getJSON("../footprint/queryTotal", function (r) {
                vue.hitCount = r.hitCount;
            });

            $.getJSON("../user/queryTotal", function (r) {
                vue.userSum = r.userSum;
            });
            $.getJSON("../goods/queryTotal", function (r) {
                vue.goodsSum = r.goodsSum;
            });
        },
        updated: function () {
            let vue = this;
            vue.hygml = (vue.yfkOrderUserSum / vue.userSum * 100).toFixed(4);
            vue.mhydds = (vue.oderUserSum / vue.userSum).toFixed(4);
            vue.mhygws = (vue.payedOrderCount / vue.oderUserSum).toFixed(4);
            vue.average1000 = (vue.orderSum / vue.hitCount * 1000).toFixed(4);
            vue.averageSales1000 = (vue.incomeSum / vue.hitCount * 1000).toFixed(4);
        }
    });
</script>
</body>
</html>